import {
  css_ab_center_dialog,
  css_child_margin_top,
  css_content_padding,
  css_disnone,
  css_wind_light_hover,
} from '../../../Css';
import { appearEl_child_func_promise } from '../../../Func/appear_dom';
import { disappearEl_child_func_promise } from '../../../Func/disappear_dom';
import { normalizeContainer } from '../../../Func/normalizeContainer';
import { packNode } from '../../../Func/packNode';
import { remove_class } from '../../../Func/remove_class';
import { listenEvent_mana } from '../../listenEvent_mana/Classes/cla_listenEvent_mana';
import { css_dialog_whiteSpace_blur } from '../Css';
import {
  dialog_self_prop_eventBind_dialog,
  prefix_dialog,
  spacename_dialog_operate,
} from '../DataDefine/sourceData';
import { dialog_eventBind } from './cla_dialog_eventBind';

const dialog_dataManaTag = 'dialog_dataMana';

export class dialog_dataMana {
  get [Symbol.toStringTag]() {
    return dialog_dataManaTag;
  }

  constructor(spacename: string) {
    this.cur_space = `${prefix_dialog}_${spacename}`;

    this.dom_dialog =
      (normalizeContainer(this.cur_space, true) as HTMLDialogElement) ||
      document.createElement('dialog');

    this.dom_dialog.id = this.cur_space;

    remove_class(
      this.dom_dialog,
      [
        css_content_padding,
        css_child_margin_top,
        css_wind_light_hover,
        css_dialog_whiteSpace_blur,
        css_ab_center_dialog,
      ],
      true
    );

    packNode(
      document.body,
      this.dom_dialog,
      'before',
      normalizeContainer('app')!
    );
  }

  /**
   * 事件 绑定 this
   */
  [dialog_self_prop_eventBind_dialog] = new dialog_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = new listenEvent_mana(spacename_dialog_operate);

  /**
   * 当前 dialog 名
   */
  cur_space: string;

  /**
   * dialog 主体元素
   */
  dom_dialog: HTMLDialogElement;

  /**
   * 显示 动画
   *
   * 动画 模式
   */
  appear_func = appearEl_child_func_promise;

  /**
   * 消失 动画
   *
   * 动画 模式
   */
  disappear_func = disappearEl_child_func_promise;

  /**
   * 空白处 点击之前
   *
   * 运行 该函数 如果存在
   */
  whiteSpace_click_func_promise_before?: () => Promise<void>;

  /**
   * 空白处 点击之后
   *
   * 运行 该函数 如果存在
   */
  whiteSpace_click_func_promise_after?: () => Promise<void>;

  /**
   * 显示 dialog
   */
  async show_view() {
    this.dom_dialog.showModal();

    await this.appear_func(this.dom_dialog);
  }

  /**
   * 退出 dialog
   */
  async close_view() {
    await this.disappear_func(this.dom_dialog);
    remove_class(this.dom_dialog, css_disnone, true);

    this.dom_dialog.close();
  }
}
